<template>
    <el-dialog :title="title" v-model="editVisible" :width="width" @close="$emit('cancel')">
        <el-form :label-width="labelWidth" :rules="rules" ref="ruleFormRef" :model="modelValue">
            <el-form-item
                v-for="(item, index) in list"
                :key="index"
                :label="item.label"
                :prop="item.key"
            >
                <el-input
                    v-if="item.type === 'input' && item?.inputType === 'number'"
                    v-bind="{ ...item.props }"
                    :input-style="item?.inputStyle"
                    v-model.number="modelValue[item.key]"
                    clearable
                >
                </el-input>
                <el-input
                    v-else-if="item.type === 'input'"
                    v-bind="{ ...item.props }"
                    :input-style="item?.inputStyle"
                    v-model="modelValue[item.key]"
                    clearable
                >
                </el-input>
                <el-input
                    v-if="item.type === 'textarea' && item?.maxLength"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                    :autosize="{ minRows: 3 }"
                    :maxlength="item?.maxLength"
                    :show-word-limit="!!item?.showWordLimit"
                    type="textarea"
                ></el-input>
                <el-input
                    v-else-if="item.type === 'textarea'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                    :autosize="{ minRows: 3 }"
                    type="textarea"
                ></el-input>
                <el-select
                    v-if="item.type === 'select'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                    :style="item?.inputStyle"
                >
                    <el-option
                        v-for="option in item.options"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                        v-bind="{ ...item.optionProps }"
                    />
                </el-select>
                <el-date-picker
                    v-if="item.type === 'date_pick'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                >
                </el-date-picker>
                <Tag
                    v-if="item.type === 'tag'"
                    v-model:labels="modelValue[item.key]"
                    :key="modelValue[item.key]"
                    :style="item?.inputStyle"
                />
                <el-autocomplete
                    v-if="item.type === 'autocomplete'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                    :trigger-on-focus="false"
                    :fetch-suggestions="item.fetchSuggestions"
                    :style="item?.style"
                />
                <!-- <el-autocomplete 
                    v-model="modelValue[item.key]"
                    placeholder="请输入您的问题"
                    :fetch-suggestions="item.querySuggestions"
                    :trigger-on-focus="false"
                    @keyup.enter.native="item.submitTextQuestion"
                /> -->
                <el-radio-group
                    v-if="item.type === 'radio'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                    :style="item?.inputStyle"
                >
                    <el-radio
                        v-for="option in item.options"
                        :key="option.value"
                        :label="option.value"
                        v-bind="{ ...item.optionProps }"
                        >{{ option.label }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="$emit('cancel')">取 消</el-button>
                <el-button type="primary" @click="saveData(ruleFormRef)">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
interface DialogBase {
    label: string;
    key: string;
    rule: Array<FormItemRule>;
}

interface InputDialog extends DialogBase {
    type: "input";
    props?: InstanceType<typeof ElInput>["$props"];
    inputType?: string;
    inputStyle?: string;
}

interface TextareaDialog extends DialogBase {
    type: "textarea";
    props?: InstanceType<typeof ElInput>["$props"];
    maxLength?: string;
    showWordLimit?: boolean;
}

interface SelectDialog extends DialogBase {
    type: "select";
    options: Record<string, any>[];
    props?: InstanceType<typeof ElSelect>["$props"];
    optionProps?: InstanceType<typeof ElOption>["$props"];
    inputStyle?: string;
}

interface DatePickerDialog extends DialogBase {
    type: "date_pick";
    props?: InstanceType<typeof ElDatePicker>["$props"];
}
interface TagDialog extends DialogBase {
    type: "tag";
    props?: InstanceType<typeof Tag>["$props"];
    inputStyle?: string;
}

interface RadioDialog extends DialogBase {
    type: "radio";
    options: Record<string, any>[];
    props?: InstanceType<typeof ElRadio>["$props"];
    optionProps?: InstanceType<typeof ElOption>["$props"];
    inputStyle?: string;
}

interface AutocompleteDialog extends DialogBase {
    type: "autocomplete";
    // options: Record<string, any>[];
    props?: InstanceType<any>["$props"];
    fetchSuggestions: any;
    style?: string;
}

export type DialogItem =
    | InputDialog
    | SelectDialog
    | DatePickerDialog
    | TextareaDialog
    | TagDialog
    | RadioDialog
    | AutocompleteDialog;
</script>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import type { ElRadio, FormInstance, FormItemRule, FormRules } from "element-plus";
import { ElInput, ElSelect, ElDatePicker, ElOption } from "element-plus";
import { toRefs } from "vue";
import Tag from "@/components/Tag.vue";
const ruleFormRef = ref<FormInstance>();
interface Props {
    list: DialogItem[];
    modelValue: Record<string, any>;
    labelWidth?: number;
    visible?: boolean;
    title?: string;
    width?: string;
}

const props = withDefaults(defineProps<Props>(), {
    list: () => [],
    modelValue: () => ({}),
    labelWidth: 120,
    width: "860px",
    visible: false,
    title: "编辑",
});

const editVisible = ref<boolean>(props.visible);

watch(
    () => props.visible,
    (newVal) => {
        editVisible.value = newVal;
        if (!ruleFormRef.value) return;
        // ruleFormRef.value.clearValidate();
        if (!newVal) {
            ruleFormRef.value!.resetFields();
        }
    },
);
const { list, modelValue, labelWidth, title, width } = toRefs(props);

const rules = reactive<FormRules>({});
list.value.forEach((item) => {
    rules[item.key] = item.rule;
});
const emit = defineEmits<{
    (e: "saveEdit"): void;
    (e: "cancel"): void;
}>();

const saveData = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            emit("saveEdit");
        } else {
            console.log("error submit!", fields);
        }
    });
};
</script>

<style lang="scss" scoped></style>
